html,
body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tabbar {
    height: calc(51vw/3.75);
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .tabbarItem {
        width: calc(75vw/3.75);
        height: calc(51vw/3.75);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* tab项默认状态 */
    .tabbarItem:nth-of-type(1) {
        .tabIcon {
            background-image: url(../images/home_default@1x.png);

        }
    }

    .tabbarItem:nth-of-type(2) {
        .tabIcon {
            background-image: url(../images/encyclopedias_default@1x.png);
        }
    }

    .tabbarItem:nth-of-type(3) {
        .tabIcon {
            background-image: url(../images/notice_default@1x.png);
        }
    }

    .tabbarItem:nth-of-type(4) {
        .tabIcon {
            background-image: url(../images/mine_default@1x.png);
        }
    }
/* tab项激活态 */
    .tabbarItem:nth-of-type(1).active {
        .tabIcon {
            background-image: url(../images/home_active@1x.png);

        }
    }

    .tabbarItem:nth-of-type(2).active {
        .tabIcon {
            background-image: url(../images/encyclopedias_active@1x.png);
        }
    }

    .tabbarItem:nth-of-type(3).active {
        .tabIcon {
            background-image: url(../images/notice_active@1x.png);
        }
    }

    .tabbarItem:nth-of-type(4).active {
        .tabIcon {
            background-image: url(../images/mine_active@1x.png);
        }
    }

    .tabIcon {
        margin-top: calc(10vw/3.75);
        width: calc(17vw/3.75);
        height: calc(18vw/3.75);
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;

    }

    span {
        margin-top: calc(6vw/3.75);
        color: #6F6F6F;
        font-family: PingFang SC;
        font-weight: normal;
        font-size: calc(10vw/3.75);
        line-height: calc(10vw/3.75);
        letter-spacing: 0;
        text-align: center;

    }
}